import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:gourmet/color/hex.dart';
import 'package:gourmet/components/store/index.dart';
import 'package:gourmet/extensions/ex_widget.dart';
import 'package:gourmet/route/index.dart';
import 'package:gourmet/ui/keep_alive.dart';
import 'package:gourmet/utils/colors.dart';
import 'package:gourmet/utils/radian.dart';
import 'package:gourmet/utils/styles.dart';

class StoreCategoryController extends GetxController {
  final double navHeight = 44 + Get.mediaQuery.padding.top;
  final double navTop = 44.0;
  RxInt tabIdx = RxInt(0);

  List<String> tabs = ['餐饮店铺', '零售店铺'];
}

class StoreCategoryPage extends GetView<StoreCategoryController> {
  const StoreCategoryPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MediaQuery.removeViewPadding(
      context: context,
      removeTop: true,
      removeLeft: true,
      removeRight: true,
      removeBottom: true,
      child: Scaffold(
        backgroundColor: HexColor(ColorsUtils.colorF7f7),
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(controller.navHeight),
          child: AnnotatedRegion<SystemUiOverlayStyle>(
            value: SystemUiOverlayStyle.dark,
            child: Container(
              color: Colors.white,
              height: controller.navHeight,
              padding: Get.mediaQuery.padding,
              child: Stack(
                children: [
                  Positioned(
                    width: 40,
                    height: controller.navTop,
                    top: 0,
                    left: 0,
                    child: Center(
                      child: Icon(
                        CupertinoIcons.chevron_back,
                        size: 20,
                        color: HexColor(ColorsUtils.color0000),
                      ),
                    ).onTap(Get.back),
                  ),
                  Center(
                    child: Text.rich(
                      TextSpan(
                        children: [
                          TextSpan(
                            text: '1/',
                            style: StylesUtils.customTextStyle(
                              fontSize: StylesUtils.fontSize16,
                              fontWeight: FontWeight.w700,
                              color: ColorsUtils.color0000,
                            ),
                          ),
                          TextSpan(
                            text: '4',
                            style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color0000,
                              fontSize: StylesUtils.fontSize12,
                              fontWeight: FontWeight.w700,
                            ),
                          ),
                          TextSpan(
                            text: ' 选择品类',
                            style: StylesUtils.customTextStyle(
                              fontSize: StylesUtils.fontSize16,
                              color: ColorsUtils.color0000,
                              fontWeight: FontWeight.w700,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  Positioned(
                    width: 40,
                    height: controller.navTop,
                    top: 0,
                    right: 0,
                    child: Center(
                      child: Icon(
                        CupertinoIcons.question_circle,
                        size: 20,
                        color: HexColor(ColorsUtils.color0000),
                      ),
                    ).onTap(() {
                      openQuestion(context);
                    }),
                  ),
                ],
              ),
            ),
          ),
        ),
        body: Column(
          children: [
            Container(
              color: Colors.white,
              padding: const EdgeInsets.only(top: 30, bottom: 20),
              child: ListBody(
                children: [
                  Container(
                    alignment: Alignment.centerLeft,
                    padding: const EdgeInsets.only(bottom: 20, left: 20),
                    child: Text(
                      '店铺类型',
                      style: StylesUtils.customTextStyle(
                        fontSize: StylesUtils.fontSize15,
                        color: ColorsUtils.color0000,
                      ),
                    ),
                  ),
                  Row(
                      children: controller.tabs
                          .asMap()
                          .map(
                            (key, value) => MapEntry(
                              key,
                              Expanded(
                                child: Obx(
                                  () => Center(
                                    child: Container(
                                      alignment: Alignment.center,
                                      constraints: const BoxConstraints.expand(
                                          width: 165, height: 50),
                                      decoration: activeBoxDecoration(key),
                                      child: Text(
                                        value,
                                        style: StylesUtils.customTextStyle(
                                          color: controller.tabIdx.value == key
                                              ? ColorsUtils.colorFfff
                                              : ColorsUtils.color3333,
                                          fontSize: StylesUtils.fontSize15,
                                        ),
                                      ).onTap(() {
                                        controller.tabIdx.value = key;
                                      }),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          )
                          .values
                          .toList())
                ],
              ),
            ),
            Container(
              height: 15,
            ),
            Expanded(
              child: Obx(
                () => IndexedStack(
                  index: controller.tabIdx.value,
                  children: [
                    KeepAliveWrapperView(
                      child: const CaterStoreView(),
                      callback: () {
                        Get.lazyPut(() => CaterStoreController());
                      },
                    ),
                    KeepAliveWrapperView(
                      child: const RetailStoreView(),
                      callback: () {
                        Get.lazyPut(() => RetailStoreController());
                      },
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
        bottomNavigationBar: SafeArea(
          bottom: true,
          child: Container(
            height: 60,
            alignment: Alignment.center,
            child: Container(
              alignment: Alignment.center,
              constraints: const BoxConstraints.expand(width: 315, height: 45),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(23),
                gradient: LinearGradient(
                  colors: [
                    ColorsUtils.rgba(255, 153, 0, 1),
                    ColorsUtils.rgba(255, 153, 0, 1),
                    ColorsUtils.rgba(254, 70, 1, 1),
                    ColorsUtils.rgba(254, 70, 1, 1)
                  ],
                  stops: const [0, 0, 1, 1],
                  transform: GradientRotation(
                    RadianUtils.angleToRadian(90),
                  ),
                  end: Alignment.topCenter,
                  begin: Alignment.bottomCenter,
                ),
              ),
              child: Text(
                '下一步',
                style: StylesUtils.customTextStyle(
                  fontSize: StylesUtils.fontSize16,
                ),
              ),
            ).onTap(() {
              Get.toNamed(Routes.storeInfo);
            }),
          ),
        ),
      ),
    );
  }

  void openQuestion(BuildContext context) {
    showDialog(
        context: context,
        builder: (c) {
          return Dialog(
            child: Center(
              child: Container(
                padding: const EdgeInsets.symmetric(horizontal: 10),
                constraints:
                    const BoxConstraints.expand(width: 290, height: 420),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.white,
                  border: Border.all(
                    color: ColorsUtils.rgba(251, 251, 251, 1),
                  ),
                ),
                child: Column(
                  children: [
                    Container(
                      padding: const EdgeInsets.only(top: 15, bottom: 15),
                      alignment: Alignment.center,
                      child: Text(
                        '如何选择',
                        style: StylesUtils.customTextStyle(
                          fontSize: StylesUtils.fontSize20,
                          color: ColorsUtils.color0000,
                        ),
                      ),
                    ),
                    Container(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '1、如何选择店铺类型？',
                        style: StylesUtils.customTextStyle(
                          fontSize: StylesUtils.fontSize15,
                          color: ColorsUtils.color0000,
                        ),
                      ),
                    ),
                    Container(
                      alignment: Alignment.centerLeft,
                      margin: const EdgeInsets.symmetric(vertical: 8),
                      child: Text(
                        '餐饮店铺与零售店铺对应的主营、辅营品类各不相同，请根据您的经营品类选择相应的店铺类型。',
                        style: StylesUtils.customTextStyle(
                          fontSize: StylesUtils.fontSize15,
                          color: ColorsUtils.color7979,
                          lineHeight: 1.3,
                        ),
                      ),
                    ),
                    Container(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '2、品类选择后可以修改吗？',
                        style: StylesUtils.customTextStyle(
                          fontSize: StylesUtils.fontSize15,
                          color: ColorsUtils.color0000,
                        ),
                      ),
                    ),
                    Container(
                      alignment: Alignment.centerLeft,
                      margin: const EdgeInsets.symmetric(vertical: 8),
                      child: Text(
                        '可以在商家APP 我的 > 店铺信息 中修改品类。',
                        style: StylesUtils.customTextStyle(
                          fontSize: StylesUtils.fontSize15,
                          color: ColorsUtils.color7979,
                          lineHeight: 1.3,
                        ),
                      ),
                    ),
                    Container(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '3、商品种类多，如何确定主营品类？',
                        style: StylesUtils.customTextStyle(
                          fontSize: StylesUtils.fontSize15,
                          color: ColorsUtils.color0000,
                        ),
                      ),
                    ),
                    Container(
                      alignment: Alignment.centerLeft,
                      margin: const EdgeInsets.only(top: 8),
                      child: Text(
                        '若您的店铺经营多种商品，或不知如何确定主营品类时，可将主要经营或销售最好的商品作为主营品类，将其他任一种商品作为辅营品类即可。',
                        style: StylesUtils.customTextStyle(
                          fontSize: StylesUtils.fontSize15,
                          color: ColorsUtils.color7979,
                          lineHeight: 1.3,
                        ),
                      ),
                    ),
                    Container(
                      margin: const EdgeInsets.only(top: 15),
                      alignment: Alignment.center,
                      child: TextButton(
                        onPressed: Get.back,
                        style: ButtonStyle(
                          fixedSize: const WidgetStatePropertyAll(
                            Size(205, 40),
                          ),
                          minimumSize: const WidgetStatePropertyAll(
                            Size(205, 40),
                          ),
                          alignment: Alignment.center,
                          overlayColor:
                              const WidgetStatePropertyAll(Colors.transparent),
                          shape: WidgetStatePropertyAll(
                            RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(20),
                              side: BorderSide(
                                color: HexColor(ColorsUtils.colorFf64),
                              ),
                            ),
                          ),
                        ),
                        child: Text(
                          '我知道了',
                          style: StylesUtils.customTextStyle(
                            color: ColorsUtils.colorFf64,
                            fontSize: StylesUtils.fontSize15,
                          ),
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ),
          );
        },
        barrierColor: ColorsUtils.rgba(0, 0, 0, 0.298039215686275));
  }

  BoxDecoration activeBoxDecoration(int index) {
    if (controller.tabIdx.value == index) {
      return BoxDecoration(
        borderRadius: BorderRadius.circular(5),
        gradient: LinearGradient(
          colors: [
            ColorsUtils.rgba(255, 153, 0, 1),
            ColorsUtils.rgba(255, 153, 0, 1),
            ColorsUtils.rgba(254, 70, 1, 1),
            ColorsUtils.rgba(254, 70, 1, 1)
          ],
          stops: const [0, 0, 1, 1],
          transform: GradientRotation(
            RadianUtils.angleToRadian(90),
          ),
          end: Alignment.topCenter,
          begin: Alignment.bottomCenter,
        ),
      );
    }
    return BoxDecoration(
      borderRadius: BorderRadius.circular(5),
      color: HexColor(ColorsUtils.colorF2f2),
    );
  }
}
